<template>
<div class="tabs">
<el-tabs v-model="tabsRouter" @tab-click="handleClick" @tab-remove="removeTab" id="tabs">
  <!-- <el-tab-pane v-if="tabs.length" label="关闭所有"> </el-tab-pane> -->
  <!-- <el-tab-pane label="首页" name="/dashboard"> </el-tab-pane> -->
  <el-tab-pane v-for="(tag, index) in tabs" :label="tag.name" :name="tag.path" :key="index" closable> </el-tab-pane>
</el-tabs>
</div>
</template>
<script>
// import {
//   mapGetters
// } from 'vuex'
// import {
//   ElTabs,
//   ElTabPane
// } from '@eui'
import util from '@util'
export default {
//   components: {
//     ElTabs,
//     ElTabPane
//   },
  name: 'tabs',
  // computed: {
  //   ...mapGetters({
  //     'tabs': 'getTabs'
  //   })
  // },
  data () {
    return {
      tabs: [],
      tabsRouter: ''
    }
  },
  mounted () {
    this.tabs = JSON.parse(localStorage.getItem(util.getItem('$user_fx').un))
  },
  methods: {
    // 获取子菜单
    // getChildMenu(path) {
    //   const menus = JSON.parse(localStorage.getItem('navMenu'))
    //   let childMenu = menus.filter(obj => {
    //     if (path && obj.path.indexOf(path) === -1) {
    //       return false
    //     }
    //     return true
    //   })
    //   if (childMenu.length) {
    //     childMenu = menus.filter(obj => obj.path === path)[0].children
    //   }
    //   this.$store.commit('CHILD_MENU', childMenu)
    // },
    // 切换标签页
    handleClick (tab) {
      const path = tab.name
      if (!path) {
        // 删除所有标签页
        this.batchRemoveTab()
        return
      }
      // 激活导航菜单
      // this.navMenu(path)
      // 路由指向指定页
      this.$router.push(path)
    },
    // 添加标签页
    addTab () {
      // this.$store.commit('ADD_TABS', this.$route)
      // console.log(this.tabs, '999999')
      if (this.tabs === null) {
        this.tabs = []
        this.tabs.push({name: this.$route.name, path: this.$route.path})
        localStorage.setItem(util.getItem('$user_fx').un, JSON.stringify(this.tabs))
      } else {
        if (this.tabs.some(v => v.path === this.$route.path)) {

        } else {
          this.tabs.push({name: this.$route.name, path: this.$route.path})
          localStorage.setItem(util.getItem('$user_fx').un, JSON.stringify(this.tabs))
        }
      }
    },
    // 删除标签页
    removeTab (targetPath) {
      let tabs = this.tabs
      let path = this.$route.path
      if (path === targetPath) {
        tabs.map((tab, index) => {
          if (tab.path === targetPath) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            path = nextTab ? nextTab.path : '/webLayout/dropBoxMan'
            // 路由指向指定页
            this.$router.push(path)
          }
        })
      }
      this.tabs = this.tabs.filter(tab => tab.path !== targetPath)
      localStorage.setItem(util.getItem('$user_fx').un, JSON.stringify(this.tabs))
      // 激活导航菜单
      // this.navMenu(path)
    },
    // 删除所有标签页
    batchRemoveTab () {
      // this.getChildMenu('loan') // 获取子菜单
      // this.$store.commit('CHILD_MENU', []) // 重置子菜单
      // this.$store.commit('CLOSE_CHILD_MENU') // 关闭子菜单
      // this.$store.commit('ACTIVE_NAV_MENU', 'dashboard') // 激活主菜单
      // this.$store.commit('ACTIVE_CHILD_MENU', 'dashboard') // 激活子菜单
      // this.$store.commit('RESET_TABS') // 重置标签页
      // 路由指向首页
      // this.$router.push('/dashboard')
    },
    // 激活导航菜单
    navMenu (path) {
      // let mainPath = path.split('/')[1]
      // let childPath = path.split('/')[2]
      // mainPath = mainPath === 'dashboard' ? 'loan' : mainPath
      // this.getChildMenu(mainPath) // 获取子菜单
      // this.$store.commit('OPEN_CHILD_MENU', childPath) // 打开子菜单
      // this.$store.commit('ACTIVE_NAV_MENU', mainPath) // 激活主菜单
      // this.$store.commit('ACTIVE_CHILD_MENU', path) // 激活子菜单
    }
  },
  watch: {
    $route () {
      // console.log(this.$route, '1232')
      this.tabsRouter = this.$route.path
      this.tabs = JSON.parse(localStorage.getItem(util.getItem('$user_fx').un))
      this.addTab()
    }
  }
}
</script>
<style lang="less">
.tabs {
  #tabs {
    // margin-left: 224px;
    // width: 75%;
    padding: 0 10px;
    background-color: #f8f8f8;
  }
  .el-tabs__item {
    border: 1px solid;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
  }
}
</style>
